<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title">{{title}}</view>
				<image @click="record()" class="imgs" src="@/static/img/friend_icon.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view v-if="type==2">
				<view class="title">代币</view>
				<view class="item">
					<image src="../../static/img/token_1.png" mode="widthFix"></image>
					<view>USDA</view>
				</view>
				<view class="title"><text>收款地址</text><text class="color_blue" @click="back()">修改转账好友</text></view>
				<view class="item">
					<image class="avatar" :src="info.headImage"></image>
					<view class="i_right">
						<view>{{info.nickName}}</view>
						<view @click="copy(info.id)"><text>ID:{{info.id}}</text>
							<image src="@/static/img/copy-icon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="title"><text>转账数量</text><text>余额：{{yue}}USDA</text></view>
				<view class="item"><input type="number" v-model="money" placeholder="请输入转账数量" /></view>
				<view class="title">钱包密码</view>
				<view class="item"><input type="text" password="true" v-model="password" placeholder="请输入钱包密码" /></view>
			</view>

			<view v-if="type==1">
				<view class="title">ID编号</view>
				<view class="item"><input type="number" v-model="userId" placeholder="请输入ID编号" /></view>
				<view class="title"><text>转账数量</text><text>余额：{{yue}}USDA</text></view>
				<view class="item"><input type="number" v-model="money" placeholder="请输入转账数量" /></view>
				<view class="title">钱包密码</view>
				<view class="item"><input type="text" password="true" v-model="password" placeholder="请输入钱包密码" /></view>
			</view>
			<view class="btn" @click="pay()">确认</view>
		</view>
		<uni-popup ref="popup" background-color="transparent" border-radius="8px 8px 0 0" type="bottom">
			<view class="network-box">
				<view class="box_top"></view>
				<image src="@/static/img/friend_img.png" mode="widthFix"></image>
				<view class="box_text">支付成功</view>
				<view class="box_btn">查看订单</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" background-color="transparent" border-radius="8px 8px 0 0" type="bottom">
			<view class="network-box network-box2">
				<view class="network-title">选择代币 <image src="../../static/img/me-21.png" @click="closePopup()"></image>
				</view>
				<view class="box_item" @click="select(0)">
					<image src="@/static/img/token_1.png"></image>
					<view>USDA</view>
					<uni-icons v-if="index==0" type="checkmarkempty" color="#3F93FF" size="24"></uni-icons>
				</view>
				<view class="box_item" @click="select(1)">
					<image src="@/static/img/token_2.png"></image>
					<view>USDA</view>
					<uni-icons v-if="index==1" type="checkmarkempty" color="#3F93FF" size="24"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		friendTransfer,
		getWalletInfoApi
	} from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				index: 0,
				money: '',
				info: '',
				yue: '',
				title: '',
				type: '', //1 非 2 好友
				userId: '',
				password: '',
			}
		},
		mixins: [navBarMixin],
		onLoad(e) {
			console.log(e);
			this.type = e.type
			if (e.type == 2) {
				this.title = '好友转账'
				this.info = JSON.parse(e.info)
			} else {
				this.title = '非好友转账'
			}
			this.wallet()
		},
		methods: {
			record() {
				// uni.navigateTo({
				// 	url: '/pages/me/rechargeRecord'
				// })
				uni.navigateTo({
					url: '/pages/me/extractveTem?type=15'
				})
			},
			wallet() {
				getWalletInfoApi().then(res => {
					console.log(res);
					this.yue = res.data.usdtBalance
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			pay() {
				// friendTransfer({
				// 	amount:this.money,
				// 	friendId: this.info.friendId }).then(res => {
				// 	console.log(res);
				// })
				friendTransfer({
					amount: this.money,
					friendId: this.type== 2?this.info.id :this.userId,
					password:this.password
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '转账成功!',
							icon: 'none',
							duration: 2000,
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
						})
					}
					console.log(res);
				})
				// this.$refs.popup.open()
			},
			// record() {
			// 	uni.navigateTo({
			// 		url: '/pages/me/extractiveRecord'
			// 	})
			// },
			back() {
				uni.navigateBack()
			},
			pull() {
				this.$refs.popup2.open()
			},
			select(e) {
				this.index = e
				this.closePopup()
			},
			closePopup() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
				position: absolute;
				left: 30rpx;
				top: 30rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 333;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				position: relative;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.imgs {
					width: 50rpx;
					position: absolute;
					right: 30px;
				}
			}
		}

		.main {
			// margin-top: 126rpx;
			// margin-top: 246rpx;
			margin: 126rpx 30rpx 60rpx;
			padding: 0 30rpx 88rpx;
			background-color: white;
			border-radius: 10rpx;
			overflow: hidden;

			.title {
				font-size: 30rpx;
				margin: 30rpx 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					&:nth-of-type(2) {
						font-size: 26rpx;
						// color: #3F93FF;
					}
				}

				.color_blue {
					color: #3F93FF;
				}
			}

			.item {
				height: 84rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				padding: 0 30rpx;

				>image {
					width: 52rpx;
					// display: block;
					margin: 0 20rpx 0 0;

					&:nth-of-type(2) {
						width: 10rpx;
						margin: 0;
					}
				}

				.avatar {
					width: 62rpx;
					height: 64rpx;
				}

				>view {
					font-weight: 500;
					font-size: 30rpx;
					flex: 1;
				}

				.i_right {
					view {
						&:nth-of-type(1) {
							font-weight: 500;
							font-size: 25rpx;
						}

						&:nth-of-type(2) {
							font-weight: 400;
							font-size: 22rpx;
							color: #6C6B6B;
							display: flex;
							align-items: center;
							margin-top: 6rpx;

							image {
								width: 32rpx;
								margin-left: 14rpx;
							}
						}
					}
				}

				input {
					font-size: 26rpx;
				}
			}

			.btn {
				width: 584rpx;
				height: 84rpx;
				line-height: 84rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				background: #3F93FF;
				border-radius: 42rpx;
				text-align: center;
				margin: 94rpx auto 20rpx;
			}
		}

		.network-box {
			height: 534rpx;
			min-height: 220rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;
			text-align: center;

			.box_top {
				width: 750rpx;
				height: 131rpx;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);
				border-radius: 25rpx 25rpx 0rpx 0rpx;
			}

			>image {
				width: 318rpx;
				margin: -78rpx 0 20rpx;
			}

			.box_btn {
				width: 615rpx;
				height: 84rpx;
				margin: 60rpx auto 0;
				line-height: 84rpx;
				background: #3F93FF;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
			}
		}

		.network-box2 {
			height: 440rpx !important;
			text-align: left;

			.network-title {
				position: relative;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);

				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 30rpx;
					top: 60rpx;
				}
			}

			.box_item {
				display: flex;
				align-items: center;
				margin: 0 30rpx 60rpx;

				image {
					width: 58rpx;
					height: 58rpx;
				}

				view {
					flex: 1;
					font-size: 30rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>